<template>
	<div class="wrapper">
	<swiper :options="swiperOption" >
		<swiper-slide v-for="item of swiperList" :key="item.id">
			<img class="swiper-img" :src="item.imgUrl" />
		</swiper-slide>
		<div class="swiper-pagination" slot="pagination"></div>
	</swiper>
	</div>
</template>

<script>
export default{
	name:'HomeSwiper',
	data: function(){
		return {
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:true
			},
			swiperList:[{
				id: '0001',
				imgUrl:'https://imgs.qunarzz.com/piao/fusion/1706/ad/904daeb9301e8a02.jpg_890x330_c358393a.jpg'
			},{
				id: '0002',
				imgUrl:	'https://imgs.qunarzz.com/piao/fusion/1706/59/9a082a55cb98f802.jpg_890x330_5e6df189.jpg'		
			}]
		}
	}
	
}
</script>

<style lang="stylus" scoped>

	.wrapper >>> .swiper-pagination-bullet-active
		background:#fff
	.wrapper
		overflow:hidden
		width:100%
		height:0
		padding-bottom:31.25%
		background:#eee
	.swiper-img
		width:100%
	
</style>